import {
  ActionType,
  ModalForm,
  ProFormDateTimePicker,
  ProFormRadio,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  StepsForm,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import {message, Modal} from 'antd';
import React from 'react';
import {postUpdateApiInfo} from "@/services/api_info/jiekoumokuai";

export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.RuleListItem>;

export type UpdateFormProps = {
  handOpen:React.Dispatch<React.SetStateAction<boolean>>
  updateModalOpen: boolean;
  values: Partial<any>;
  actionRef: React.MutableRefObject<ActionType | undefined>
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const ref = props.actionRef
  const intl = useIntl();
  const values = props.values
  return (
    <ModalForm
      open={props.updateModalOpen}
      onOpenChange={props.handOpen}
      modalProps={{destroyOnClose:true}}
      onFinish={async(value) => {
        const res = await postUpdateApiInfo(value as API.UpdateApiInfoVo)
        if (res?.code === 200){
          props.handOpen(false)
          if (props.actionRef.current) {
            props.actionRef.current.reload();
          }
          message.success("更新成功")
        }}
      }
    >
      <ProFormText
        name="id"
        initialValue={values.ID}
        hidden
      />
      <ProFormText
        name="name"
        label='接口名称'
        width="md"
        rules={[
          {
            required: true,
            message: '请输入接口名称',
          },
        ]}
        initialValue={values.name}
      />
      <ProFormText
        name="path"
        label='接口路径'
        width="md"
        rules={[
          {
            required: true,
            message: '请输入接口路径',
          },
        ]}
        initialValue={values.path}
      />
      <ProFormSelect
        options={[
          {
            value: 'GET',
            label: 'GET',
          },
          {
            value: 'POST',
            label: 'POST',
          },
        ]}
        rules={[
          {
            required: true,
            message: '请输入请求方式',
          },
        ]}
        width="md"
        name="method"
        label="请求方式"
        initialValue={values.method}
      />
      <ProFormText
        name="description"
        label='接口描述'
        width="md"
        rules={[
          {
            required: true,
            message: '请输入接口描述',
          },
        ]}
        initialValue={values.description}
      />
      <ProFormTextArea
        name="requestParam"
        width="lg"
        label='请求参数'
        placeholder='请输入请求参数'
        rules={[
          {
            required: true,
            message: '请至少输入五个字符',
            min: 5,
          },
        ]}
        initialValue={values.requestParam}
      />
      <ProFormTextArea
        name="requestHeader"
        width="lg"
        label='请求头'
        placeholder='请输入请求头'
        rules={[
          {
            required: true,
            message: '请至少输入五个字符',
            min: 5,
          },
        ]}
        initialValue={values.requestHeader}
      />
      <ProFormTextArea
        name="responseHeader"
        width="lg"
        label='响应头'
        placeholder='请输入响应头'
        rules={[
          {
            required: true,
            message: '请至少输入五个字符',
            min: 5,
          },
        ]}
        initialValue={values.responseHeader}
      />
    </ModalForm>
  );
};

export default UpdateForm;
